{% extends "blog/admin/base.html" %}
{% block title %}Admin: {% if edit %}Edit{% else %}New{% endif %} Post{% endblock %}
{% block head %}
<script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<!--#Uncomment this if using javascript textile preview <script type="text/javascript" charset="utf-8"
		src="/media/admin/js/textile.js"></script> -->
{% endblock %}

{% block body %}
<div class="block form">
	<div class="hd">
		<h2>Admin: {% if edit %}Edit Existing {% else %}Create New{% endif %} Post</h2>
	</div>
	{% call form() %}
    <div class="bd">
		<div>
			<p>
			{{ form.title.label()|safe }}<span>{{ form.title.errors()|safe }}</span>
		    {{ form.title.render(class="text box focus")|safe }}
			</p>
			<p>
			{{ form.body.label()|safe }}<span>{{ form.body.errors()|safe }}</span>
			{{ form.body.render(class="text box", rows="10")|safe }}
			<span class="info">{{ form.body.help_text }}</span>
			</p>
			<p>
			{{ form.seo.label()|safe }}<span>{{ form.seo.errors()|safe }}</span>
			{{ form.seo.render(class="text box")|safe }}
			<span class="info">{{ form.seo.help_text }}</span>
			</p>
			<p>
			{{ form.tags.label()|safe }}<span>{{ form.tags.errors()|safe }}</span>
			{{ form.tags.render(class="text box", rows="4")|safe }}
			<span class="info">{{ form.tags.help_text }}</span>
			</p>
			<p>
			{{ form.draft.label()|safe }} {{ form.draft.render()|safe }} {{ form.draft.errors()|safe }}
			</p>
		</div>
	</div>
	<div class="ft">
		<div>
			<p>
				<input id="btn_submit" type="submit" value="Submit" /> <input id="btn_preview" type="button" value="Preview" />
			</p>
		</div>
	</div>
	{% endcall %}
</div>
<div id="preview" class="block post">
	<div class="yui3-widget-hd hd">
		<h2>Post Preview</h2>
	</div>
	<div class="yui3-widget-bd bd">
	</div>
	<div class="yui3-widget-ft ft">
		<input id="hide-preview" type="button" value="Close Preview" />
	</div>	
</div>
<div id="notification"></div>
<!--div id="console" class="block">
</div-->	
<script type="text/javascript">
YUI({combine: true, timeout: 10000}).use('console', 'console-filters', 'anim',
 	'node', 'json-parse', 'io-base', 'overlay', function (Y) {
	
	// Overlay as a message container
	var preview = new Y.Overlay({
		zIndex: 10,
		contentBox: "#preview",
		xy: [100, 200],
		width: 800,
		render: true,
	});
	preview.hide();
	
	var notify = new Y.Overlay({
		contentBox:"#notification",
		xy: [450, 20],
		width: 400,
		render: true,
	});
	
	var notification = Y.one("#notification");
	
	var ERR_MESSAGE = "Unable to show post preview."
	
	new Y.Console({
		boundingBox: '#console',
	    style: 'block',
	    plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ] // add some plugins
	}); //.render();

	function clear_alert() {
		notify.setStdModContent("body", "", "replace");
		notification.set("class", "");
		notification.addClass("hidden");
	};
	
	function show_alert(type, msg) {
		Y.log('show alert');
		notification.set("class", "");
		notification.addClass("alert " + type);
		notify.setStdModContent("body", msg, "replace");
		notify.show();
		notification.setStyle("opacity", "100");
		var anim_duration = 10;
		if (type == "error") {
			anim_duration = 15;
		}
		var anim = new Y.Anim({
		        node: notification,
		        to: { opacity: 0 },
				duration: anim_duration
		    });
		anim.run();
		anim.on('end', function () {
			clear_alert();
	    });
	};
	
	// callback function on ajax request completed
	function io_success(id, o) {
		Y.log("Create Submitted");
		clear_alert();
		Y.log(o.responseText);
		var response = Y.JSON.parse(o.responseText);
		if (response.success) {
			var html_preview = Y.Node.create(response.html);
			preview.setStdModContent("body", html_preview, "replace");
			preview.set("centered", true);
			preview.show();
		}
		else
		{
			show_alert("error", ERR_MESSAGE);
		}
	}

	// callback function when unable to do ajax io
	function io_failure(e) {
		Y.log("Add Reviews Failed");
		show_alert("error", ERR_MESSAGE);
	}		
	
	function jsPreviewPost(e) {
		var post = Y.one('#f_body');
		
		var textile = post.get('value');
		var html = superTextile(textile);
		var html_preview = Y.Node.create(html);
		preview.setStdModContent("body", html_preview, "replace");
		preview.set("centered", true);
		preview.show();
		SyntaxHighlighter.all();
	}
	
	/* Get html preview using AJAX with textile parser */
	function previewPost(e) {
		var post = Y.one('#f_body');
		
		var post_data = "data=" + escape(post.get('value'));
		var url = "/admin/preview";
		var cfg = {
			method: "POST",
			data: post_data
		};
		
		var request = Y.io(url, cfg);
		e.preventDefault();
	}		
	
	function hidePreview(e) {
		preview.hide();
	}
	
	// setup callback functions
	Y.on('domready', function (e) {
		Y.on('io:success', io_success, this);
		Y.on('io:failure', io_failure, this);
		// use jsPreviewPost instead of previewPost if using javascript textile parser
		Y.on('click', previewPost, "#btn_preview");
		Y.on('click', hidePreview, "#hide-preview");	
	});

});
</script>
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
{% endblock %}

 
